import React, { useEffect, useState } from "react";
import style from "./style.module.scss"
import { EmptyPage, MyHealthyCurrencyNotice, MyInquiryNotice, MyNavBar, MySystemNotice } from "../../../../components";
import { useLocation, useNavigate } from "react-router-dom";
import commonInformationNext from "../../../../assets/images/icon/common resource/hdpi/common_information_next_n.png"
import { dateYearToDate } from "../../../../utils/formatTime";
import { useRequest } from "ahooks";
import { getHealthyCurrencyNoticeList, getInquiryNoticeList, getSystemNoticeList } from "../../../../api/my";
import { useAppSelector } from "../../../../store/hooks";

// 用户通知列表类型
interface noticeListRawState {
  id: number,
  content: string,
  createTime: number
}

const Index: React.FC = () => {

  const navigate = useNavigate()

  const userId = useAppSelector((state) => state.user.userInfo.userId)
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId)

  const { state: { detailTitle } } = useLocation()

  const [noticeList, setNoticeList] = useState<noticeListRawState[]>([])
  const [pageIndex, setPageIndex] = useState(1)

  const getNoticeList = async () => {
    if (detailTitle === "系统消息") {
      // 用户系统通知列表
      const resp = await getSystemNoticeList(pageIndex, 12, userId, sessionId)
      console.log(resp);

      setNoticeList(resp.result as noticeListRawState[])
    } else if (detailTitle === '问诊消息') {
      // 用户问诊通知列表
      const resp = await getInquiryNoticeList(pageIndex, 12, userId, sessionId)
      console.log(resp);

      setNoticeList(resp.result as noticeListRawState[])
    } else {
      // 用户H币通知列表
      const resp = await getHealthyCurrencyNoticeList(pageIndex, 12, userId, sessionId)
      console.log(resp);

      setNoticeList(resp.result as noticeListRawState[])
    }
  }

  useEffect(() => {
    getNoticeList()
  }, [])

  return <div>
    {
      !noticeList.length ? (
        <EmptyPage title={detailTitle} desc="暂无消息" path={-1}></EmptyPage>
      ) : (
        <div className={style.message_detail}>
          <MyNavBar
            title={detailTitle}
            style={{ backgroundColor: "#fff" }}
            onClickLeft={() => { navigate(-1) }}
          ></MyNavBar>
          <div className={style.messageList}>
            {
              // 系统消息
              detailTitle === '系统消息' ? (
                noticeList.map(item => {
                  return <div key={item.id}>
                    <MySystemNotice
                      id={item.id}
                      content={item.content}
                      createTime={item.createTime}
                    ></MySystemNotice>
                  </div>
                })
              ) : (
                // 问诊消息
                detailTitle === '问诊消息' ? (
                  noticeList.map(item => {
                    return <div key={item.id}>
                      <MyInquiryNotice
                        id={item.id}
                        content={item.content}
                        createTime={item.createTime}
                      ></MyInquiryNotice>
                    </div>
                  })
                ) : (
                  // H币入账消息
                  noticeList.map(item => {
                    return <div key={item.id}>
                      <MyHealthyCurrencyNotice
                        id={item.id}
                        content={item.content}
                        createTime={item.createTime}
                      ></MyHealthyCurrencyNotice>
                    </div>
                  })
                )
              )
            }
          </div>
        </div>
      )
    }
  </div >
};

export default Index;
